<template>
<div>
  <div>{{state}}</div>
  <div>{{state.b}}</div>
  <button @click="refXg()">点击修改reactive数据</button>
  <div>
    <p v-for="(item,index) in timer.data" :key="index">
      <span>{{item.balance_deal}}---reactive--</span>
      <span>{{item.aa}}---reactive</span>
    </p>
    <button @click="xg()">点击</button>
  </div>
</div>
</template>
<script lang="ts">
import {reactive, ref} from 'vue'
export default {
  name: "reactive-syntax",
  setup(){
    let state=reactive<{a?:number,b:number,c:boolean}>({b:666,c:false})
    let refXg=()=>{
      state.c = !state.c;
      state.a=123
    }
    const timer = reactive<{data:any,code:string,msg:string,suc:boolean}>({
      "code": "000",
      "msg": "成功",
      "data": [{
        "flg": 1,
        "deal_time": "2020-08-03 09:26:32",
        "balance_deal": "+100.00",
        "balance_id": 1,
      },
        {
          "flg": 0,
          "deal_time": "2020-07-31 17:24:01",
          "balance_deal": "-500.00",
          "balance_id": 1,
        },
        {
          "flg": 1,
          "deal_time": "2020-07-31 17:12:10",
          "balance_deal": "+1000.00",
          "balance_id": 1,
        }],
      "suc": true
    });
    let xg = () => {
      //点击按钮的时候，给数据中添加一个aa为false的属性
      timer.data.forEach((v:any) => {
        v.aa = false;
      })
    }
    return{
      state,
      refXg,
      timer,
      xg
    }
  }
}
</script>

<style scoped>

</style>
